<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SMValidator Tutor 4</title>
    <link rel="stylesheet" href="monokai-sublime.css">
    <link rel="stylesheet" href="style.css">
    <script src="highlight.pack.js"></script>
    <script src="../dist/SMValidator.js"></script>
</head>

<body>
    <form>
        <ol>
            <li>
                <p>这次老板觉得一下子校验所有的表单太吓人了，他希望可以一步一步引导用户去纠正错误的表单</p>
                <pre><code class="javascript">
//short表示表单短路校验，在遇到校验失败的表单时退出
//因为short控制的是整个form里所有input的检验行为，所以只能在config或SMValidator实例设置，data-rule设置无效
new SMValidator('form', {
    short: true
});
                </code></pre>
                <p>数字：<input type="text" name="test2"></p>
                <p>邮件：<input type="text" name="test3"></p>
                <p><button type="submit">提交表单</button></p>
            </li>
            <li>
                <p>但对于单个input文本的校验，老板却不希望短路，他想要把所有校验失败的规则都显示出来</p>
                <pre><code class="javascript">
//使用"&"分割，可以校验input的所有规则
//返回的失败消息使用&lt;br&gt;分割，所以demo才设置failHtml为div来换行
//required属于特性，不与其他规则一起校验
//"&"与"|"不能混在一起使用
new SMValidator('form', {
    fields: {
        test6: {
            required: true,
            rule: 'number&length(2,)',
            failHtml: '&lt;div style="color:#f00"&gt;&lt;/div&gt;'
        }
    }
});
                </code></pre>
                <pre><code class="html">
&lt;!--使用html的形式则可以这样写--&gt;
&lt;input type="text" data-rule="required&number&length(2,)&failHtml(&lt;div style='color:#f00'&gt;&lt;/div&gt;)"&gt;
                </code></pre>
                <input type="text" name="test6" placeholder="输入字母试试">
            </li>
            <li>
                <p>上面这些当然还不能满足老板的要求，他现在要求失败消息排在一行，用"；"分开且包在"【】"里</p>
                <pre><code class="html">
&lt;input type="text" name="test7"&gt;
&lt;span id="failMsg" style="color:#f00"&gt;&lt;/span&gt;
&lt;script&gt;
    //fail是在校验失败时的回调函数，传回失败消息，使用"&"时传回的是数组，使用"|"时传回的是字符串
    //pass是在校验成功时的回调函数
    //fail和pass的调用对象是input，可以在回调函数中使用this指向input[name="test7"]
    new SMValidator('form', {
        fields: {
            test7: {
                required: true,
                failHtml: false, //禁用failHtml
                rule: 'number&length(2,)',
                fail: function(messages) {
                    document.getElementById('failMsg').innerText = '【' + messages.toString().replace(',', '；') + '】';
                },
                pass: function() {
                    document.getElementById('failMsg').innerText = '';
                }
            }
        }
    });
&lt;/script&gt;
                </code></pre>
                <input type="text" name="test7" placeholder="输入字母试试">
                <span id="failMsg" style="color:#f00"></span>
            </li>
            <li>
                <p>
                    至此，老板已经疲于向你提需求了，他只想知道SMValidator到底还有什么功能。(＾－＾)V<br>
                    本教程到此为止还没提到的功能有支持bootstrap和semantic皮肤，以及checkbox/radio/select和textarea的校验<br>
                    有兴趣的同学可以查看源码里的Demo<br>
                    （完）
                </p>
            </li>
        </ol>
    </form>

    <script>
        hljs.initHighlightingOnLoad();

        SMValidator.setLang({
            number: '请输入数字',
            email: '请输入正确的邮箱格式',
            length_greater: '长度要求大于{0}',
        });

        new SMValidator('form', {
            short: true,
            required: '请输入内容',
            failCss: 'error',
            failStyle: {color:'#c3f', border:'1px solid #f00'},
            passCss: 'success',
            passStyle: {color: '#090'},
            failHtml: ["<b style='color:#f00'></b>", "!<b style='color:#f00'>&times;</b>"],
            fields: {
                test2: 'required|number',
                test3: 'required|email',
                test6: {
                    required: true,
                    rule: 'number&length(2,)',
                    failHtml: '<div style="color:#f00"></div>'
                },
                test7: {
                    required: true,
                    failHtml: false,
                    rule: 'number&length(2,)',
                    fail: function(messages) {
                        document.getElementById('failMsg').innerText = '【' + messages.toString().replace(',', '；') + '】';
                    },
                    pass: function() {
                        document.getElementById('failMsg').innerText = '';
                    }
                }
            },
            submit: function(valid, form) {
                if(valid) form.submit();
            }
        });
    </script>
</body>

</html>